<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <div class="mainor_te">
          <el-button @click="editAction()" class="marginLeft10" type="primary"
            >新增客户</el-button
          >
        </div>
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="80px"
        >
          <el-form-item label="代理商名称" prop="company_name">
            <el-input
              v-model.trim="form.company_name"
              placeholder="代理商名称"
              clearable
              class="wid220"
            ></el-input>
          </el-form-item>

          <el-form-item label="域名" prop="domain_name">
            <el-input
              v-model.trim="form.domain_name"
              placeholder="域名"
              clearable
              class="wid220"
            ></el-input>
          </el-form-item>
          <div class="clearfix"></div>
          <el-form-item class="marginTop10">
            <el-button
              class="reset marginLeft10"
              type="primary"
              @click="reset()"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="getArticleList"
              :loading="listLoading"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="main_table" style="min-height: 590px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
        >
          <el-table-column
            label="代理商名称"
            width="130"
            prop="agent_name"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.agent_name }}</template>
          </el-table-column>
          <el-table-column
            label="负责人"
            prop="manager_name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="手机号"
            prop="mobile"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="域名"
            prop="domain_name"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="所在地"
            prop="address"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="审核状态">
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.audit_status == 0"
                >待审核</el-tag
              >
              <el-tag type="success" v-else-if="scope.row.audit_status == 1"
                >已通过</el-tag
              >
              <el-tag type="danger" v-else-if="scope.row.audit_status == 2"
                >已驳回</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                @click="editAction(scope.row.id)"
                type="text"
                size="mini"
                class="handle_btn"
                >编辑</el-button
              >
              <el-button
                @click="account(scope.row.id)"
                type="text"
                size="mini"
                class="handle_btn"
                >账号</el-button
              >
              <el-button
                @click="examine(scope.row.id)"
                type="text"
                size="mini"
                class="handle_btn"
                >审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="main_page boxdq">
        <!-- 分页 -->
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="current.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
      <el-dialog title="代理商审核" :visible.sync="dialogVisible" width="70%">
        <el-form
          :rules="rules"
          ref="agentForm"
          :model="agentForm"
          label-width="80px"
        >
          <el-form-item label="资质简图:">
            <el-upload
              :action="uploadPath"
              list-type="picture-card"
              :data="{ store: 'saas/contract' }"
              style="min-height: 120px"
              :file-list="filelist"
              :disabled="true"
              :on-preview="handlePictureCardPreview"
            >
            </el-upload>
            <el-dialog :visible.sync="dialogVisible1" append-to-body>
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="审核状态:" prop="audit_status">
            <el-select
              class="remark"
              :disabled="disabled"
              v-model="agentForm.audit_status"
              placeholder="请选择审核状态"
            >
              <el-option label="待审核" disabled :value="0"></el-option>
              <el-option label="同意" :value="1"></el-option>
              <el-option label="拒绝" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注:" prop="audit_remark">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入审核备注"
              :disabled="disabled"
              v-model="agentForm.audit_remark"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :disabled="disabled" @click="sublemt"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { Debounce } from "@/utils/index.js";
import {
  // 获取代理商列表数据
  getQueryList,
  // 代理商审核
  agentExamine,
  list,
  userexports,
  queryInfo,
} from "@/api/user/userList";
import { menuType } from "@/api/user/userMenu";
import { regionListByPid } from "@/api/global/provinces";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
import { uploadPath } from "@/api/currency";
export default {
  data() {
    return {
      serveTime: "",
      detail: {}, //详情
      // 时间
      parseTime,
      // 分页
      current: {
        page: 1,
        limit: 20,
      },
      totalCount: 1,
      // 搜索
      form: {},
      //   model: [],
      start_time: "",
      end_time: "",
      // 列表数据
      list: [],
      listLoading: false,
      // 全选
      selectArr: [],
      // 更多
      moredata: false,
      firstList: [],
      secondList: [],
      thiredList: [],
      firstId: "",
      secondId: "",
      thiredId: "",
      userType: [], //客户类型列表
      exportbuVisible: false,
      // 订单导出时间
      exportend: [], //结束时间
      exportstr: [], //入驻时间
      export_status: "",
      ids: [],

      dialogVisible: false, // 代理商审核
      agentForm: {
        id: null, // 供应商id
        qualifications: "",
        audit_remark: null, // 审核备注
        audit_status: null, // 审核状态
      },
      uploadPath,
      filelist: [],
      dialogImageUrl: "",
      dialogVisible1: false,
      rules: {
        audit_remark: [
          { required: true, message: "请输入审核备注", trigger: "blur" },
        ],
        audit_status: [
          { required: true, message: "请选择审核状态", trigger: "change" },
        ],
      },
      disabled: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //上传图片-查看
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },
    //编辑
    editAction(id) {
      this.$router.push({ path: "/user/list/detail", query: { id } });
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.getData();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.limit = pageSize;
      this.getData();
    },
    changePage(page) {
      this.current.page = page;
      this.getData();
    },
    // 导出时间范围
    datepicker(val) {
      let start = "";
      let end = "";
      if (val) {
        start = new Date(val[0]).getTime();
        end = new Date(val[1]).getTime();
        if (end - start > 365 * 24 * 60 * 60 * 1000) {
          this.$message.warning("选择范围不能超过一年，请重新选择");
          this.exportstr = "";
        }
      }
    },
    endpicker(val) {
      let start = "";
      let end = "";
      if (val) {
        start = new Date(val[0]).getTime();
        end = new Date(val[1]).getTime();
        if (end - start > 365 * 24 * 60 * 60 * 1000) {
          this.$message.warning("选择范围不能超过一年，请重新选择");
          this.exportend = "";
        }
      }
    },

    exportConfirm() {
      if (
        this.selectArr.length == 0 &&
        this.exportend.length == 0 &&
        this.exportstr.length
      ) {
        this.$message.warning("请先选择需要导出的数据");
        return;
      }
      if (this.selectArr.length > 0) {
        let arr = [];
        this.selectArr.map((e) => {
          arr.push(e.id);
        });
        this.ids = arr.join(",");
      } else {
        let str = this.exportstr;
        let end = this.exportend;
        let strtime = [];
        let endime = [];
        str.map((c) => {
          let a = c / 1000;
          strtime.push(a);
        });
        end.map((d) => {
          let a = d / 1000;
          endime.push(a);
        });
        this.exportstr = strtime.join(",");
        this.exportend = endime.join(",");
      }
      let forms = {
        ids: this.selectArr.length != 0 ? this.ids : "",
        start_time: this.exportstr.length != 0 ? this.exportstr : "",
        end_time: this.exportend.length != 0 ? this.exportend : "",
        model: this.export_status,
      };
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        forms
      );
      userexports(data)
        .then((res) => {
          const link = document.createElement("a");
          let blob = new Blob([res], {
            type: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.download = "客户列表";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          this.exportbuVisible = false;
        })
        .catch(() => {
          this.$message.error("导出失败");
        });
    },

    // 获取列表
    getData() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let search = {
        agent_name: this.form.company_name,
        domain_name: this.form.domain_name,
        page: this.current.page,
        per_page: this.current.limit,
      };
      let data = this.$beSubmt(search);
      getQueryList(data).then((res) => {
        if (res.errcode == 0) {
          res.data.list.map((e) => {
            e.is_look = e.is_look == 0 ? false : true;
            e.freight_yf = false;
          });
          this.list = res.data.list;
          this.totalCount = res.data.count;
        } else {
          this.$message.error(res.errmsg);
        }
        loading.close();
      });
    },

    list_form() {
      let form = {};
      for (let i in this.form) {
        if (this.form[i] != "") {
          form[i] = this.form[i];
        }
      }
      if (form.start_time) {
        form.start_time = `${form.start_time[0] / 1000},${
          form.start_time[1] / 1000
        }`;
      }
      if (form.end_time) {
        form.end_time = `${form.end_time[0] / 1000},${form.end_time[1] / 1000}`;
      }
      return form;
    },

    //重置表单
    reset() {
      this.$refs.userListFrom.resetFields();
      this.getData();
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },

    account(param) {
      this.$router.push({ path: "/user/list/account", query: { id: param } });
    },

    // 审核操作
    examine(id) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let data = {
        id,
      };
      let query = this.$beSubmt(data);
      queryInfo(query).then((res) => {
        this.filelist = [];
        if (res.errcode == 0) {
          this.agentForm.id = id;
          // 当audit_status默认为0时,自动修改为1
          this.agentForm.audit_status =
            res.data.audit_status == 0 ? 1 : res.data.audit_status;
          this.agentForm.audit_remark = res.data.audit_remark;
          let qualifications = res.data.qualifications || "";
          if (qualifications) {
            JSON.parse(qualifications).forEach((is) => {
              this.filelist.push({
                name: "",
                path: is.path,
                url: is.src,
                id: is.uid,
              });
            });
          }
          this.dialogVisible = true;
        } else {
          this.$message.errmsg(res.errmsg);
        }
        loading.close();
      });
    },

    sublemt: Debounce(function () {
      let data = {
        audit_status: this.agentForm.audit_status,
        id: this.agentForm.id,
        audit_remark: this.agentForm.audit_remark,
        action: "audit",
      };
      let param = this.$beSubmt(data);
      agentExamine(param).then((res) => {
        if (res.errcode == 0) {
          this.$message.success(res.errmsg);
          this.$refs.agentForm.resetFields();
          this.dialogVisible = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    }),
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.maincl {
  .el-select {
    width: 114px;
  }

  .more {
    margin-left: 50px;
  }

  .handle_btn {
    padding: 0;
    border: 0;
  }

  .edit_dialog {
    .address {
      max-width: 350px;
    }
  }

  .mainor_form form {
    // width: calc(100% - 180px);
    width: 100%;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }

  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }

      &.hover-row > td {
        background: none !important;
      }

      .current-row > td {
        background: none !important;
      }
    }
  }

  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }

  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }

  /deep/.el-table tr.expanded + tr {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr > td {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .mainex_ta {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .mainex_ta th,
  /deep/.el-table tr.expanded + tr .mainex_ta tr {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr:hover {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr:hover > td {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .el-table tr:hover {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
    background: #fafafa !important;
  }

  /deep/.el-table .cell {
    display: flex;
    align-items: center;
  }

  /deep/.boxdq {
    justify-content: flex-end;
  }
}

.exptitle {
  padding: 10px 0px;
}

/deep/.el-upload--picture-card {
  display: none !important;
}

/deep/.el-upload-list--picture-card .el-upload-list__item:first-child {
  margin-left: 0 !important;
}

.remark {
  width: 350px !important;
}
</style>
